<script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue'
import { ElMessage, ElNotification } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import TheDrawer from './TheDrawer.vue';
import AddChapter from './AddChapter.vue';
import { useSettingStore } from '@/stores/setting';
import { useUserStore } from '@/stores/user';
import { useCourseStore } from '@/stores/course';
import type { courseForm, chapterForm } from '@/api/type'
import { deleteCourseByCid, getChapter } from '@/api/course';
import emitter from '@/utils/emitter';
// 从路由拿
let props = defineProps(['cid']);
let chapterId = ref<number>(1);
// 拿到课程信息
//从仓库拿到课程相关值
const courseInfo = useCourseStore().courseInfo;
const thisCourse = ref<courseForm>({});
for (let i = 0; i < courseInfo.length; i++) {
    if (courseInfo[i].cid == props.cid) {
        thisCourse.value = courseInfo[i];
        break;
    }
}
// 控制修改信息抽屉
var drawer = ref(false)
const closeDrawer = () => {
    drawer.value = !drawer.value;
}
// 控制新建章节抽屉
var chaDrawer = ref(false)
const closechaDrawer = () => {
    chaDrawer.value = !chaDrawer.value;
}

const router = useRouter()
const deleteCourse = async () => {
    let result = await deleteCourseByCid(props.cid);
    ElMessage.success(result.data);
    emitter.emit("refresh-course");
    router.push('/course');
}

//关于章节
const allChapter = ref<chapterForm[]>([]);
const getAllchapter = async () => {
    let result = await getChapter(props.cid);
    allChapter.value = result.data;

}
//进入具体的章节信息
const chapterDetail = (id: any) => {
    chapterId.value = id;
    // useSettingStore().scene = 2;
}
onMounted(() => {
    getAllchapter();
})
</script>
<template>
    <!-- <div class="main" v-show="useSettingStore().scene == 0"> -->
    <div class="main">
        <el-image class="course-image" :src="thisCourse.courseImg" fit="contain"></el-image>
        <div class="details">
            <el-descriptions :title="thisCourse.courseName" :column="2" width="150px">
                <el-descriptions-item label="任课教师：">
                    {{ useUserStore().userInfo.name + "老师" }}
                    <el-button type="primary" :icon="Edit" circle style=" margin-left: 10px;" @click="drawer = true" />
                </el-descriptions-item>
                <el-descriptions-item></el-descriptions-item>
                <el-descriptions-item label=" 专业类别："> {{ thisCourse.major }}</el-descriptions-item>
                <el-descriptions-item label="班级：">{{ thisCourse.className }}</el-descriptions-item>
                <el-descriptions-item label="课程简介">{{ thisCourse.introduction }}</el-descriptions-item>
                <el-descriptions-item><el-button @click="deleteCourse">删除课程</el-button></el-descriptions-item>
            </el-descriptions>
        </div>
        <!-- 抽屉输入 -->
        <el-drawer v-model="drawer" size="500px">
            <template #header>
                <h4> 修改课程信息</h4>
            </template>
            <!-- 抽屉里面的，东西太多丢另一个文件了 -->
            <TheDrawer :closeDrawer="closeDrawer" :thisCourse="thisCourse"></TheDrawer>
        </el-drawer>

        <!-- 章节展示 -->
        <div class="chapter">
            <el-button style="margin-left: 40%;" @click="chaDrawer = true">新增章节</el-button>
            <el-collapse accordion>
                <template v-for="(item) in allChapter" :key="item.id">
                    <el-collapse-item :name="item.id">
                        <template #title>
                            <!-- <el-button size="small" style="margin-right: 10px;"
                                @click="chapterDetail(item.id)">进入</el-button> -->
                            <el-icon style="margin-right: 10px;">
                                <Chicken />
                            </el-icon>
                            {{ item.name }}
                        </template>
                        {{ item.introduction }}
                    </el-collapse-item>
                </template>
            </el-collapse>
        </div>
    </div>
    <el-drawer v-model="chaDrawer" size="500px">
        <template #header>
            <h4> 新建章节</h4>
        </template>
        <AddChapter :closechaDrawer="closechaDrawer" :cid="cid" />
    </el-drawer>
</template>

<style scoped>
.main {
    display: flex;
    height: auto;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
    /* background: yellow; */
}

.course-image {
    margin-right: 20px;
    width: 200px;
    /* 根据需要调整图片宽度 */
}

.chapter {
    margin-top: 30px;
    width: 71%;
}

.details {
    margin-left: 60px;
    width: 600px;
    /* flex: 1; */
    /* background: yellowgreen; */
}

.introduction {
    margin-top: 20px;
}
</style>
